<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<meta name="apple-mobile-web-app-capable" content="yes">
  	<meta name="format-detection" content="telephone=no">
	<title>首页 - Blog</title>
    <link rel="stylesheet" href="{%static 'layui/css/layui.css' %}">
	<link rel="stylesheet" href="{%static 'css/common.css' %}">
      <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
</head><!-- 闲鱼资源网：精品资源分享网www.xianyuboke.com -->
<body style="background: #f1f1f1;">
	<header class="layui-bg-cyan">
		<nav class="layui-container">
			<div class="layui-row">
			    <div class="layui-col-md2 logo">

			    	<a href="http://127.0.0.1:8000/blog/index"><img src="{% static 'images/mi.png' %}" style="width: 50px;height: 50px"></a>
			    </div>
			    <div class="layui-col-md8 layui-hide-xs">
			    	<ul class="layui-nav layui-bg-cyan">
					  	<li class="layui-nav-item layui-this">
					    	<a href="">首页</a>
					  	</li>

					</ul>
			    </div>
			    <div class="layui-col-md2 layui-hide-xs userinfoBox">
			    	<ul class="layui-nav layui-bg-cyan">
					  	<li class="layui-nav-item">
					    	<a href="javascript:;"><i class="layui-icon layui-icon-search search"></i></a>
					  	</li>

					</ul>
			    </div>
		   	</div>
		</nav>
	</header>

		<div class="layui-container">
		<div class="layui-row layui-col-space20">
			<div class="layui-col-md8">
				<div class="layui-row">
					<div class="layui-col-md12">
						<div class="layui-carousel" id="carousel">
                            <a href="javascript:;"><img src="{% static 'images/lundeng.jpg' %}" style="width:100%;height: 200px"></a>
{#					  		<div carousel-item style="height: 200px">#}
{#                                <a href="javascript:;">123<img src="{% static 'images/login-bg.jpg' %}"></a>#}
{#							    <div><a href="javascript:;">123<img src="{% static 'images/login-bg.jpg' %}"></a></div>#}
{#							    <div><a href="javascript:;">123<img src="{% static 'images/login-bg.jpg' %}"></a></div>#}
{#					  		</div>#}
						</div>
					</div>
					<div class="layui-col-md12 "></div>
					<div class="layui-col-md12">
						<div class="main zdbox">
							<div class="subject"><b>[置顶]</b><a href="javascript:;" title="用DTcms做一个独立博客网站（响应式模板）">用layui做一个独立博客网站（响应式）</a><em>2018-12-28 11:53:24 发布</em></div>
							<div class="content">我是熊大，风格迥异的四个我，有着不同的个性，不同的人格，甚至不同的职业。
行险解秘专注探险的我，朝阳蓬勃酷爱嘻哈的我，文墨生花文艺气息满满的我。
亦是我，亦非我，我是不一样的烟火。</div>
						</div>
					</div>
					<div class="layui-col-md12 margin20"></div>

                    {% for article in article_list %}
					<div class="layui-col-md12">
						<div class="main list">
							<div class="subject"><a href="javascript:;" class="caty">[python]</a>{{ article.title }}<em>{{ article.publish_date }}发布</em></div>
							<div class="content layui-row">
								<div class="layui-col-md12">
									<div class="list-text" style="height: 60px">{{ article.brief_content }}</div>
									<div class="list-stat layui-row">

{#										<div class="layui-col-xs3 layui-col-md3 Label">#}
{#											<i class="layui-icon layui-icon-note"></i>#}
{#											<a href="javascript:;">PHP</a>#}
{#											<a href="javascript:;">Discuz</a>#}
{#										</div>#}
{##}
{#										<div class="layui-col-xs3 layui-col-md3">#}
{#											<i class="layui-icon layui-icon-reply-fill"></i>#}
{#											<em>12条评论</em>#}
{#										</div>#}
{##}
{#										<div class="layui-col-xs3 layui-col-md3">#}
{#											<i class="layui-icon layui-icon-read"></i>#}
{#											<em>12次阅读</em>#}
{#										</div>#}

										<div class="layui-col-xs3 layui-col-md3 alink" style="float: right">
											<a href="/blog/detail/{{article.article_id}}" class="layui-btn layui-btn-xs">阅读原文</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
                     {% endfor %}
					<div class="layui-col-md12 margin20"></div>
					<div class="layui-col-md12" id="pages"></div>
				</div>
	        </div>
	        <div class="layui-col-md4">
				<div class="layui-row">
					<div class="layui-col-md12">
						<div class="layui-card">
						  	<div class="layui-card-header">
								<span class="layui-breadcrumb" lay-separator="|">
									<a href="javascript:;">站点统计</a>
									<a href="javascript:;">联系站长</a>
								</span>
						  	</div>
						  	<div class="layui-card-body" id="stat" style="display: none;">
						  		<table class="layui-table">
								  	<colgroup>
								    	<col width="120">
								    	<col width="230">
								  	</colgroup>
								  	<tbody>
								    	<tr>
								      		<td>运行时间：</td>
								      		<td>856 天</td>
								    	</tr>
								    	<tr>
								      		<td>发表文章：</td>
								      		<td>1024 篇</td>
								    	</tr>
								    	<tr>
								      		<td>注册用户：</td>
								      		<td>3689 人</td>
								    	</tr>
								  	</tbody>
								</table>
						  	</div>
						  	<div class="layui-card-body" id="binfo">
						  		<table class="layui-table">
								  	<colgroup>
								    	<col width="120">
								    	<col width="230">
								  	</colgroup>
								  	<tbody>
								    	<tr>
								      		<td>QQ：</td>
								      		<td>1594408528</td>
								    	</tr>
								    	<tr>
								      		<td>Wechat：</td>
								      		<td>BF1594408528</td>
								    	</tr>
								    	<tr>
								      		<td>qqGroup：</td>
								      		<td>1258151669</td>
								    	</tr>
								  	</tbody>
								</table>
						  	</div>
						</div>
					</div>
					<div class="layui-col-md12 margin20"></div>
					<div class="layui-col-md12">
						<div class="layui-card">
						  	<div class="layui-card-header">
								<span>
									热门文章
								</span>
						  	</div>
						  	<div class="layui-card-body">
                                 {% for article in top10_article_list %}
								<table class="layui-table" lay-skin="nob">
								  	<tbody>
								    	<tr><td><a href="/blog/detail/{{article.article_id}}">{{ article.title }}</a></td></tr>

								  	</tbody>
								</table>
                                 {% endfor %}
						  	</div>
						</div>
					</div>
					<div class="layui-col-md12 margin20"></div>
					<div class="layui-col-md12">
						<div class="layui-card">
						  	<div class="layui-card-header">
								<span>
									捐助本站
								</span>
						  	</div>
						  	<div class="layui-card-body" style="text-align: center;">
						    	<img src="{% static 'images/wx.jpg' %}" style="width: 70%">
						    	<br/>
						    	<p>无论多少，都是心意!</p>
						  	</div>
						</div>
					</div>
				</div>

	        </div>

		</div>

	</div>
    <div style="height: 100px;width: 100%;">

        <div class="body-footer" style="margin: 0 auto;height: 100px;width: 50%">
            <div class="col-md-4 col-md-offset-3">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="/blog/index?page={{previous_page}}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% for num in page_num %}
                        <li ><a href="/blog/index?page={{num}}">{{ num }}</a></li>


                        {% endfor %}
                        <li>
                            <a href="/blog/index?page={{next_page}}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

	<!-- 尾部 -->
	<div class="footer"></div>
	<footer class="layui-bg-cyan">
		<div class="layui-container">
			<div class="layui-row">
				<p>广东东软学院 Powered By  <a href="https://gitee.com/XzcGroup/XzcBlogTemplate" target="_blank" title="XzcBlogTemplate">网络工程</a></p>
			</div>
		</div>
	</footer>
</body>
<link rel="stylesheet" href="{%static 'layui/layui.all.js' %}">

<script>
	layui.carousel.render({
	    elem: '#carousel'
	    ,width: '100%' //设置容器宽度
	    ,arrow: 'always' //始终显示箭头
	    //,anim: 'updown' //切换动画方式
  	});
  	layui.laypage.render({
	    elem: 'pages' //注意，这里的 test1 是 ID，不用加 # 号
	    ,count: 123 //数据总数，从服务端得到
  	});
</script>
</html>